<template>
  <div class="center">
    <!-- 头部 -->
    <div class="table_header flex flex_bet flex-wrap">
      <div class="table_button">
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="Refresh"></el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="btnaddBrand">创建模板</el-button>
      </div>
      <div class="table_searchs flex felx_align">
        <div class="table_search flex">
          <el-input placeholder="搜索" v-model="searchTable" class="input-with-select" size="small">
            <el-select v-model="select" slot="prepend" placeholder="请选择" class="table_select" style="width:105px">
              <el-option label="桌面名" value="1"></el-option>
              <!-- <el-option label="包名" value="2"></el-option> -->
              <el-option label="归属" value="3"></el-option>
              <el-option label="批次" value="4"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="idnameSearch"></el-button>
          </el-input>
        </div>
        <dynamicTable :checkboxVal="checkboxVal" @alter="alterCheckbok" />
      </div>
    </div>
    <!-- table -->
    <el-table stripe style="width: 100%" :data="browserTable" :key="key" border fit highlight-current-row ref="tableDataRef">
      <el-table-column v-if="colData[0].istrue" min-width="50" align="center" prop="username" label="模板ID"></el-table-column>
      <el-table-column v-if="colData[1].istrue" min-width="130" align="center" prop="batch" label="名称"></el-table-column>
      <el-table-column v-if="colData[2].istrue" min-width="80" align="center" prop="name" label="创建人"></el-table-column>
<!--      <el-table-column v-if="colData[3].istrue" min-width="130" align="center" prop="control_ids" label="包名">-->
<!--        <template slot-scope="scope">-->
<!--          <div class="flex flex_cen" style="flex-wrap:wrap">-->
<!--            <div v-for="(item,index1) in scope.row.control_ids" :key="index1" style="margin-right:5px">{{`控件${index1+1}:${item},　`}}</div>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column v-if="colData[4].istrue" min-width="120" align="center" prop="create_time" label="更新时间">
        <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
      </el-table-column>
      <el-table-column v-if="colData[4].istrue" min-width="120" align="center" prop="create_time" label="分发时间">
        <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
      </el-table-column>
      <el-table-column v-if="colData[4].istrue" min-width="80" align="center" prop="create_time" label="页面数">
        <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
      </el-table-column>
      <el-table-column v-if="colData[4].istrue" min-width="140" align="center" prop="create_time" label="适配学龄段">
        <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
      </el-table-column>
      <el-table-column v-if="colData[4].istrue" min-width="120" align="center" prop="create_time" label="批次">
        <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
      </el-table-column>


      <el-table-column  min-width="200" align="center" prop="name" label="UI定制">
        <template>
          <el-button size="mini" type="primary" @click="setLauncherControl">样式定制</el-button>
          <el-button size="mini" type="primary" @click="setPageControl">页面定制</el-button>
        </template>
      </el-table-column>

      <el-table-column min-width="330" align="center" prop="log" label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-button size="mini" type="primary">编辑</el-button>
            <el-button size="mini" type="primary">分发</el-button>
            <el-button size="mini" type="primary">模板关联</el-button>
            <el-button size="mini" @click="getdeleteDesktopControl(scope.row.id)">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination background :current-page.sync="listQuery.startSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="listQuery.pageSize">
      </el-pagination>
    </div>
    <el-dialog visible.sync="false" width="80%" top="8vh" @close="addFormclose" title="桌面定制" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-row :gutter="26" style="height:100%" class="flex felx_align">
        <el-col :span="8" class="content_left">
          <div class="grid-content bg-purple log-picture">
            <!-- <h2>桌面定制</h2> -->
            <el-form :model="addForm" ref="ruleForm" label-position="left">
              <el-form-item label="我的桌面" label-width="75px" prop="batch">
                <el-select v-model="addForm.name" placeholder="请选择桌面" style="width:85%" @change="selectTable" :disabled="!editSubjects">
                  <el-option v-for="item in lotoptions" :key="item.name" :label="item.name" :value="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择批次" label-width="75px" prop="batch">
                <el-select v-model="addForm.batch" multiple placeholder="请选择批次" style="width:85%">
                  <el-option v-for="item in batchData" :key="item.id" :label="item.batch" :value="item.id.toString()"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="背景图片" label-width="75px" prop="background" style="width:88%">
                <div class="flex felx_align upLogo">
                  <el-input v-model="addForm.background" placeholder="请上传图片"></el-input>
                  <el-upload class="upload-demo" action :auto-upload="false" :show-file-list="false" :on-change="compileapkAvatarUpload">
                    <el-button size="mini ">覆盖</el-button>
                  </el-upload>
                </div>
              </el-form-item>
              <div v-for="(item,index) in forForm" :key="index">
                <el-form-item :label="`控件${index + 1}图片`" label-width="75px" prop="package">
                  <div class="flex felx_align upLogo">
                    <div class="flex logo_upload" style="width:85%">
                      <el-input autocomplete="off" placeholder="图片分辨率为1920*1200" v-model="forForm[index].control_name"></el-input>
                      <el-upload :action="`${uploadLink}api/uploadControl`" class="upload-demo" :data="pdfData" :show-file-list="false" :on-success="handleSuccess">
                        <el-button size="mini " @click="controlP(index)">覆盖</el-button>
                      </el-upload>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item :label="`控件${index + 1}跳转`" label-width="75px" prop="batch">
                  <!-- <el-input v-model="addForm.package[index]" placeholder="请输入跳转包名,多个请用英文输入法的逗号隔开" type="textarea " style="width:85%"></el-input> -->
                  <el-select v-model="addForm.package[index]" multiple placeholder="请选择包名" style="width:85%">
                    <el-option v-for="(item,index) in appDate" :key="index" :label="item.package_name" :value="item.package_name"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button v-if="editSubjects" type="primary" @click="getaddDesktopImg">确 定</el-button>
                <el-button v-else type="primary" @click="geteditDesktopControl">编辑</el-button>
              </div>
            </el-form>
          </div>
        </el-col>
        <el-col :span="16" class="flex flex_cen">
          <el-col :span="21">
            <div v-if="addForm.name == '乐学桌面' && forForm != ''" class="back_one">
              <div class="desktop-bj" :style="`background: url('${addForm.background}')`">
                <div class="desktop-top">
                  <img src="@/assets/images/bgTop.png" alt="">
                </div>
                <div class="desktop-center flex" style="height:83%;padding: 0 20px">
                  <div class="bj-left">
                    <img :src="forForm[0].control_addr" alt="">
                  </div>
                  <div class="bj-right flex" style="align-content: space-between;flex-wrap: wrap">
                    <div class="classroom flex" style="height:48%">
                      <div class="classroom-left">
                        <img :src="forForm[1].control_addr" alt="">
                      </div>
                      <div class="classroom-right">
                        <img :src="forForm[2].control_addr" alt="">
                      </div>
                    </div>
                    <div class="app-bj flex" style="height:48%">
                      <div class="app" style="margin-left:20px">
                        <img :src="forForm[3].control_addr" alt="">
                      </div>
                      <div class="app" style="margin: 0 20px">
                        <img :src="forForm[4].control_addr" alt="">
                      </div>
                      <div class="app">
                        <img :src="forForm[5].control_addr" alt="">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="addForm.name == '天才桌面' && forForm != '' && forForm.length >= 9" class="back_one">
              <div class="desktop-bj" :style="`background: url('${addForm.background}')`">
                <div class="desktop-top">
                  <img src="@/assets/images/bgTop.png" alt="">
                </div>
                <div class="desktop-center flex" style="height:83%;padding: 0 20px">
                  <div class="bj-left" style="position: relative;">
                    <div class="img_index">1</div>
                    <img :src="forForm[0].control_addr" alt="">
                  </div>
                  <div class="bj-right flex" style="align-content: space-between;flex-wrap: wrap">
                    <div class="classroom flex" tyle="height: 48%;">
                      <div class="classroom-left" style="position: relative;">
                        <div class="img_index">2</div>
                        <img :src="forForm[1].control_addr" alt="">
                      </div>
                      <div class="classroom-right" style="position: relative;">
                        <div class="img_index">3</div>
                        <img :src="forForm[2].control_addr" alt="">
                      </div>
                    </div>
                    <div class="classroom flex" style="height: 48%;">
                      <div class="classroom-left" style="position: relative;">
                        <div class="img_index">4</div>
                        <img :src="forForm[3].control_addr" alt="">
                      </div>
                      <div class="classroom-right" style="position: relative;">
                        <div class="img_index">5</div>
                        <img :src="forForm[4].control_addr" alt="">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="foot-img">
                  <ul class="flex flex_bet">
                    <li style="position: relative;">
                      <div class="img_index">6</div><img :src="forForm[5].control_addr" alt="">
                    </li>
                    <li style="position: relative;">
                      <div class="img_index">7</div><img :src="forForm[6].control_addr" alt="">
                    </li>
                    <li style="position: relative;">
                      <div class="img_index">8</div><img :src="forForm[7].control_addr" alt="">
                    </li>
                    <li style="position: relative;">
                      <div class="img_index">9</div><img :src="forForm[8].control_addr" alt="">
                    </li>
                    <li style="position: relative;">
                      <div class="img_index">10</div><img :src="forForm[9].control_addr" alt="">
                    </li>
                    <li style="position: relative;">
                      <div class="img_index">11</div><img :src="forForm[10].control_addr" alt="">
                    </li>
                    <li style="position: relative;">
                      <div class="img_index">12</div><img :src="forForm[11].control_addr" alt="">
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </el-col>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="editSubjects" type="primary" @click="getaddDesktopImg" size="mini" round>部署桌面</el-button>
        <el-button v-else type="primary" @click="geteditDesktopControl" size="mini" round>部署桌面</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogFormVisible" width="60%" top="8vh" @close="addFormclose" title="桌面定制" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="newAddForm" ref="ruleForm" :rules="rules" class="diolog_adapt">
        <el-form-item label="模板名称" label-width="100px">
          <el-input v-model="newAddForm.name" autocomplete="off" placeholder="请输入模板名称最多输入15个字" width="200px"></el-input>
        </el-form-item>
        <el-form-item label="屏幕分辨率(宽)" label-width="100px">
          <el-input v-model="newAddForm.width" type="number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="屏幕分辨率(高)" label-width="100px">
          <el-input v-model="newAddForm.height" type="number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="适配学龄设置" label-width="100px">
          <el-input v-model="newAddForm.age" type="number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建学龄段名称" label-width="100px">
          <el-input v-model="newAddForm.createGradeName" autocomplete="off"></el-input>
        </el-form-item>
        <el-tag type="danger">若选用教管壹,请勾选使用年级,否则将无法进行模板关联</el-tag>
        <el-form-item>
          <template>
            <el-radio-group v-model="newAddForm.grade" size="small" >
              <el-radio-button v-for="item in gradeOptions" :label="item.label" :key="item.value">{{item.label}}</el-radio-button>
            </el-radio-group>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getAddLauncher('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除弹窗 -->
    <delete-Dialog title="" :visible.sync="deleteDialogs.show" width="25%" top="40vh" @deleteEvents="deleteEvents" :deleteText="deleteDialogs.deleteText" />
  </div>
</template>

<script>
import dynamicTable from "@/components/DynamicTable";
import objectable from "@/utils/objectable.js";
import { queryDesktopName, queryDesktopControl, queryBackground, desktopBatch, addDesktopImg, queryIdDesktopControl, editDesktopControl, deleteDesktopControl, addLauncherDesk } from "@/api/customMade.js";
import { uploadBackground, querySystemAppPackage } from "@/api/allocation.js";
import { getBatchTwo } from "@/api/equipment.js";
import wallpaper from '../wallpaper/index'
import deleteDialog from "@/components/deleteDialog";
import {addAppIcon} from "@/api/deployment";
export default {
  components: { dynamicTable, wallpaper, deleteDialog },
  data() {
    return {
      checkboxVal: ["模板id", "名称", "创建人", "UI定制", "创建时间"],
      key: 1,
      colData: [], //动态控制table
      total: 0,
      searchTable: "",
      select: "", //搜索条件
      //归属table
      browserTable: [],
      //添加按钮控制
      dialogFormVisible: false,
      //编辑按钮控制
      editSubjects: true,
      //浏览器专题id
      subjectId: 0,
      listQuery: { startSize: 1, pageSize: 10, userId: localStorage.getItem("ID"), name: undefined, package: undefined, username: undefined, batch: undefined, sort: '' },
      //桌面下拉选择
      lotoptions: [],
      //添加表单
      addForm: {
        name: "",
        package: [],
        background: "",
        batch: ''
      },
      newAddForm:{
        name: "",
        height: '',
        width: '',
        age: '',
        createGradeName: '',   //创建的学龄段名称
        grade: []
      },
      //此处为年纪多选框测试数据
      checked1: true,
      checked2: false,
      checked3: false,
      checked4: true,
      checkboxGroup1: [],
      checkboxGroup2: [],
      //测试到此
      forForm: [],
      batchData: [],//批次列表
      imgIndex: 0,
      pdfData: { userId: localStorage.getItem("ID"), last_ip: sessionStorage.getItem("Ip") },
      appDate: [],//包名数据
      //删除弹窗
      deleteDialogs: { show: false, deleteText: '', deleteId: 0 },
      uploadLink: process.env.VUE_APP_BASE_API,
      gradeOptions: [{label: '一年级', value: 1}, {label: '二年级', value: 2}, {label: '三年级', value: 3}, {label: '四年级', value: 4},{label: '五年级', value: 5}, {label: '六年级', value: 6}, {label: '初一', value: 7},{label: '初二', value: 8}, {label: '初三', value: 9}, {label: '高一', value: 10}, {label: '高二', value: 11},{label: '高三', value: 12}],  //todo:后面再写年纪
      rules: {
        name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
        height: [{ required: true, message: "请输入屏幕高度", trigger: "blur" }],
        width: [{ required: true, message: "请输入屏幕宽度", trigger: "blur" }],
        grad: [{ required: true, message: "请选择年纪", trigger: "blur" }],
      },
    }
  },
  created() {
    this.colData = objectable(this.checkboxVal, this.checkboxVal); //转为数组对象，好控制table
    this.getqueryDesktopControl()
    this.getBatch()
    this.getBatch()
  },
  methods: {
    //删除
    getdeleteDesktopControl(id) {
      this.deleteDialogs.show = true
      this.deleteDialogs.deleteId = id
    },
    //删除按钮事件
    deleteEvents() {
      let params = { userId: localStorage.getItem("ID"), last_ip: sessionStorage.getItem("Ip"), id: this.deleteDialogs.deleteId }
      deleteDesktopControl(params).then(res => {
        this.$message.success(res.msg)
        this.getqueryDesktopControl()
      })
    },

    //编辑
    geteditDesktopControl() {
      this.forForm.forEach((item, index, arr) => arr[index].control_package = this.addForm.package[index])
      let addForm = JSON.parse(JSON.stringify(this.addForm))
      addForm.userId = localStorage.getItem("ID")
      addForm.last_ip = sessionStorage.getItem("Ip")
      addForm.control = this.forForm
      addForm.control.forEach(item => item.control_package = item.control_package.join(','));
      addForm.batch = this.addForm.batch.toString()
      addForm.id = this.subjectId
      delete addForm.package
      editDesktopControl(addForm).then(res => {
        this.$message.success(res.msg)
        this.getqueryDesktopControl()
        this.dialogFormVisible = false
      }).catch(err => { })
    },
    //编号获取桌面图标信息
    getqueryIdDesktopControl(id) {
      this.editSubjects = false
      this.subjectId = id
      this.dialogFormVisible = true
      this.getquerySystemAppPackage()
      queryIdDesktopControl({ id: id }).then(res => {
        console.log('---------', res.data)
        let data = res.data[0]
        this.addForm.name = data.name
        data.batch ? this.addForm.batch = data.batch.split(',') : ''
        this.addForm.background = data.background
        this.forForm = data.control_ids
        let arr = []
        data.control_ids.forEach(item => { arr.push(item.control_package.toString()) })
        this.addForm.package = arr.map(item => {
          return item.split(',')
        })
      })
    },
    //添加
    getaddDesktopImg() {
      this.forForm.forEach((item, index, arr) => arr[index].control_package = this.addForm.package[index])
      let addForm = JSON.parse(JSON.stringify(this.addForm))
      addForm.userId = localStorage.getItem("ID")
      addForm.last_ip = sessionStorage.getItem("Ip")
      addForm.control = this.forForm
      addForm.control.forEach(item => item.control_package = item.control_package.join(','));
      addForm.batch = this.addForm.batch.toString()
      delete addForm.package
      addDesktopImg(addForm).then(res => {
        this.$message.success(res.msg)
        this.getqueryDesktopControl()
        this.dialogFormVisible = false
      })
    },
    controlP(index) {
      this.imgIndex = index
      //console.log("上传时触发", index)
    },
    //控件图片上传
    handleSuccess(res) {
      if (res.code == 200) {
        this.forForm[this.imgIndex].control_addr = res.data.imgPath
        this.forForm[this.imgIndex].control_name = res.data.imgName
      } else {
        this.$message.error(res.msg)
      }
    },
    //背景图片上传
    compileapkAvatarUpload(file) {
      var fd = new FormData()
      fd.append('file', file.raw)
      fd.append('userId', localStorage.getItem("ID"))
      fd.append('last_ip', sessionStorage.getItem("Ip"))
      uploadBackground(fd).then(res => {
        this.addForm.background = res.data.imgPath
      })
    },
    getqueryDesktopControl() {
      queryDesktopControl(this.listQuery).then(res => {
        this.browserTable = res.data
        this.total = res.total
      }).catch(err => {
        this.browserTable = []
        this.total = 0
      })
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getqueryDesktopControl();
    },
    handleCurrentChange(val) {
      this.listQuery.startSize = val
      this.getqueryDesktopControl();
    },
    //搜索,1:桌面名，2：包名
    idnameSearch() {
      if (!this.select) return this.$message.warning("请先选择查询条件");
      this.listQuery.startSize = 1
      this.listQuery.pageSize = 10
      switch (this.select) {
        case '1':
          this.listQuery.name = this.searchTable
          this.getqueryDesktopControl();
          break;
        case '2':
          this.listQuery.package = this.searchTable
          this.getqueryDesktopControl();
          break;
        case '3':
          this.listQuery.username = this.searchTable
          this.getqueryDesktopControl();
          break;
        case '4':
          let search = this.batchData.filter(key => key.batch == this.searchTable).map(item => item.id)[0]
          this.listQuery.batch = search ? search : this.searchTable
          this.getqueryDesktopControl();
          break;
      }
    },
    btnaddBrand() {
      this.getqueryDesktopName()
      this.getquerySystemAppPackage()
      this.editSubjects = true
      this.dialogFormVisible = true
    },
    //获取所有包名
    getquerySystemAppPackage() {
      querySystemAppPackage({ userId: localStorage.getItem("ID") }).then(res => {
        this.appDate = res.data
      }).catch(err => {
        this.appDate = []
      })
    },
    //获取桌面批次
    getBatch() {
      getBatchTwo({ userId: localStorage.getItem("ID") }).then(res => {
        this.batchData = res.data
      }).catch(err => {
        this.batchData = []
      })
    },
    //选择桌面
    selectTable(val) {
      this.getqueryBackground(val)
    },
    //桌面名获取背景和控件
    getqueryBackground(val) {
      queryBackground({ name: val }).then(res => {
        this.forForm = res.data.control_ids
        this.addForm.background = res.data.background
      })
    },
    //获取桌面名
    getqueryDesktopName() {
      queryDesktopName({ userId: localStorage.getItem("ID") }).then(res => {
        this.lotoptions = res.data
      })
    },
    Refresh() {
      this.listQuery = { startSize: 1, pageSize: 10, userId: localStorage.getItem("ID"), name: undefined, package: undefined, username: undefined, batch: undefined, sort: '' }
      this.getqueryDesktopControl()
    },
    //编辑添加表单关闭事件
    addFormclose() {
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
        this.addForm = { name: "", package: [], background: "", batch: '' }
        this.newAddForm = { name: "", height: 0, width: 0, grade: [] }
        this.forForm = []
      })
    },
    //下拉动态table子组件
    alterCheckbok(key, conte) {
      this.key = key;
      this.colData.filter(i => {
        if (conte.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        }
      });
    },
    getAddLauncher(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let addForm = JSON.parse(JSON.stringify(this.newAddForm))
          addForm.last_ip = sessionStorage.getItem("Ip")
          addForm.userId = localStorage.getItem("ID")
          addForm.batch = this.addForm.batch.toString()
          addForm.package = this.addForm.package.toString()
          debugger
          console.log(addForm)
          addLauncherDesk(addForm).then(res => {
            this.$message.success(res.msg)
            this.getTabularData()
            this.dialogFormVisible = false
          }).catch(err => { })
        } else {
          return false;
        }
      });
    },
    setLauncherControl() {
      this.$router.push('/customMade/customLauncher')
    },
    setPageControl() {
      this.$router.push('/customMade/customPage')
    }
  }
}
</script>

<style lang="scss" scoped>
.content_left {
  height: 100%;
  .log-picture {
    max-height: 625px;
    overflow: auto;
    h2 {
      font-weight: 500;
      margin-top: 0;
    }
  }
  .upLogo {
    .logo_Title {
      margin-right: 5px;
    }
    .upload-demo {
      position: absolute;
      right: 10px;
    }
    .logo_upload {
      width: 75%;
      position: relative;
    }
  }
  .facility {
    text-align: center;
  }
  .picture {
    text-align: center;
    margin-top: 40px;
  }
  .logo_text {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    span {
      display: inline-block;
      width: 250px;
      font-size: 14px;
      line-height: 25px;
      p {
        margin: 0;
        font-size: 16px;
        padding-bottom: 10px;
      }
    }
  }
  .download-log {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    .download-template {
      width: 250px;
      a {
        background-color: #252e3c;
        height: 40px;
        display: block;
        line-height: 40px;
        width: 110px;
        text-align: center;
        color: #70a1e2;
      }
    }
  }
}
.desktop-bj {
  // height: 625px;
  height: 100%;
  padding: 20px;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  .desktop-top {
    //height: 70px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .desktop-center {
    margin-top: 20px;
    height: 80%;
    .bj-left {
      width: 30%;
      // border-radius: 20px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .bj-right {
      width: 70%;
      img {
        width: 100%;
        height: 100%;
      }
      .classroom {
        height: 48.5%;
        .classroom-left {
          width: 50%;
          // border-radius: 20px;
          overflow: hidden;
          margin: 0 20px;
        }
        .classroom-right {
          width: 50%;
          // border-radius: 20px;
          overflow: hidden;
        }
      }
      .app-bj {
        height: 47.5%;
        .app {
          width: 31%;
          // border-radius: 20px;
          overflow: hidden;
        }
      }
    }
  }
}
.img_index {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-weight: 600;
  font-size: 20px;
}
.foot-img {
  ul {
    margin-top: 20px;
    padding: 0 50px;
    li {
      width: 60px;
      height: 60px;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }
}
.back_one {
  background-image: url("../../../assets/images/custoMede1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 5%;
}
</style>

<style scoped>
/deep/ .el-dialog__body {
  padding: 10px 20px 0 20px;
}
/deep/ .el-form-item__label {
  font-size: 12px;
}
</style>
